<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>广告管理</title>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

ul, li {
	list-style: none;
}

body {
	text-align: center;
}

#play {
	width: 400px;
	height: 300px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -155px 0 0 -205px;
	overflow: hidden;
}

#playimg {
	width: 400px;
	height: 300px;
	position: absolute;
}

#playimg li {
	height: 300px;
	overflow: hidden;
}

#playimg img {
	width: 400px;
	height: 300px;
}

#playbtn {
	position: absolute;
	left: 0;
	bottom: 5px;
}

#playbtn li {
	display: inline;
	background: #eee;
	padding: 2px 5px;
	margin: 0 3px;
	cursor: pointer;
}

#playbtn .current {
	background: #f0f;
}
</style>
<script type="text/javascript">
	function $(id) {
		return document.getElementById(id)
	}
	function moveElement(elementID, final_x, final_y, interval) {//这个方法在DOM艺术那个书上讲的很清楚 
		if (!document.getElementById)
			return false;
		if (!document.getElementById(elementID))
			return false;
		var elem = document.getElementById(elementID);
		if (elem.movement) {
			clearTimeout(elem.movement);
		}
		if (!elem.style.left) {
			elem.style.left = "0px";
		}
		if (!elem.style.top) {
			elem.style.top = "0px";
		}
		var xpos = parseInt(elem.style.left);
		var ypos = parseInt(elem.style.top);
		if (xpos == final_x && ypos == final_y) {
			return true;
		}
		if (xpos < final_x) {
			var dist = Math.ceil((final_x - xpos) / 10);
			xpos = xpos + dist;
		}
		if (xpos > final_x) {
			var dist = Math.ceil((xpos - final_x) / 10);
			xpos = xpos - dist;
		}
		if (ypos < final_y) {
			var dist = Math.ceil((final_y - ypos) / 10);
			ypos = ypos + dist;
		}
		if (ypos > final_y) {
			var dist = Math.ceil((ypos - final_y) / 10);
			ypos = ypos - dist;
		}
		elem.style.left = xpos + "px";
		elem.style.top = ypos + "px";
		var repeat = "moveElement('" + elementID + "'," + final_x + ","
				+ final_y + "," + interval + ")";
		elem.movement = setTimeout(repeat, interval);
	}
	function imgChange(num) {//切换图片焦点 
		if (!$('play'))
			return false;
		var piclist = $('playimg').getElementsByTagName('img');
		var imgheight = piclist[0].offsetHeight;
		var moveY = -(imgheight * num);
		moveElement('playimg', 0, moveY, 5);
	}
	function classToggle(arr, n) {//切换按钮样式 
		for (var i = 0; i < arr.length; i++) {
			arr[i].className = '';
		}
		arr[n].className = 'current';
	}
	function btnChange(btns) {//鼠标移动播放 
		if (!$(btns))
			return false;
		$('play').onmouseover = function() {
			autokey = false
		};
		$('play').onmouseout = function() {
			autokey = true
		};
		var arr = $(btns).getElementsByTagName('li');
		for (var i = 0; i < arr.length; i++) {
			arr[i].index = i;//设置索引号 
			arr[i].onmouseover = function() {
				//var num=index(this,arr); 
				classToggle(arr, this.index);
				imgChange(this.index);
			}
		}
	}
	function autoChange(btns) {
		if (!$(btns))
			return false;
		if (!autokey)
			return false;
		var arr = $(btns).getElementsByTagName('li');
		for (var i = 0; i < arr.length; i++) {
			if (arr[i].className == 'current') {
				var n = i + 1;
			}
		}
		if (n >= arr.length)
			n = 0;
		classToggle(arr, n);
		imgChange(n);
	}
	var autokey = true;
	setInterval("autoChange('playbtn')", 3000);
	window.onload = function() {
		btnChange('playbtn');
	}
</script>
</head>
<body>
<div id="play">
	<ul id="playimg">
		<c:forEach items="${list}" var="ad">
		<li><a href="${ad.url }" target="_black"><img alt="" src="${ad.adconPath }" /></a></li>
		</c:forEach>
	</ul>
	<ul id="playbtn">
		<c:forEach items="${list}" var="ad" varStatus="status">
		<li class="${status.index+1==1?'current':'' }">${status.index + 1 }</li>
		</c:forEach>
	</ul>
</div>
</body>
</html>